<template>
  <div class="article">
    <div v-if="mode === 0">
      <div v-if="data.title" class="article">
        <!-- <mp-loadmore type="loading" v-if="pload" /> -->

        <div class="content">
          <!-- <div v-if="shareEvent" class="clearfix">
            <div @click="showMore()" class="showMore">查看更多</div>
          </div> -->
          <h3 class="title">{{data.title}}</h3>
          <h4 class="summary" v-if="data.summary"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span>{{data.summary}}</span></h4>
          <div class="user">
            <span v-if="data.author"><span>{{data.author}}</span>&nbsp;&nbsp;&nbsp;&nbsp;</span>阅读<span>{{data.hits}}</span>
            </div>
          <div class="art-content">
            <div v-html="data.detail"></div>
            <!-- <rich-text nodes="{{data.detail}}"></rich-text> -->
          </div>
          <div class="explain">【免责声明】本文仅代表作者本人观点，与本小程序无关</div>
        </div>
      </div>
      <div v-if="!data.title&&!token">
        <!-- <div>文章详情</div> -->
        <loginPage @loginEvent="getDetail()"></loginPage>
      </div>
    </div>
    <div v-if="mode === 1">
      <about></about>
    </div>

  </div>
</template>
<script>
import { getDetail } from '@/utils/api'
import loginPage from '@/components/login-page'
import { mixinsMode } from '@/components/mixins/mixins-mode'
export default {
  data () {
    return {
      data: {},
      loading: false,
      mode: null,
      shareEvent: false,
      token: 'true'
    }
  },
  mixins: [mixinsMode],
  components: {
    // MpLoadmore,
    loginPage
  },
  onLoad () {
    this.getDetail()
  },
  onShow () {
    // wx.showLoading({ title: '加载中...' })
    // let page = getCurrentPages()
    this.mode = wx.getStorageSync('mode')
    this.token = wx.getStorageSync('accessToken')
    wx.setNavigationBarTitle({
      title: '文章详情'
    })
    // if (page.length === 1) {
    //   this.shareEvent = true
    //   this.getMode()
    //   this.mode = wx.getStorageSync('mode')
    // }
  },
  created () {
    wx.showShareMenu({
      withShareTicket: true
    })
    this.mode = wx.getStorageSync('mode')
    // console.log(this.mode)
    if (this.mode === null) {
      this.getMode()
    } else {
      this.token = wx.getStorageSync('accessToken')
    }
  },
  onShareAppMessage (res) {
    return {
      title: this.data.title,
      imgUrl: this.data.imgUrl
    }
  },
  methods: {
    showMore () {
      wx.navigateTo({ url: '/pages/index/main' })
    },
    async getDetail () {
      try {
        this.loading = true
        wx.showLoading({ title: '加载中...' })
        let query = this.$root.$mp.query
        let res = await getDetail({
          agentId: query.agentId,
          articleId: query.articleId
        })
        if (res === undefined) {
          this.getMode()
          this.mode = wx.getStorageSync('mode')
          this.token = wx.getStorageSync('accessToken')
        }
        this.data = res || {}
        this.loading = false
        wx.hideLoading()
        if (this.data.detail) {
          this.data.detail = this.data.detail.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')
        }
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>
<style scoped lang="scss">
.article {
  .content {
    padding: 15px;
    font-size: 32px;
  }
  .title {
    font-size: 40px;
    font-weight: bold;
  }
  .user {
    color: $color-primary;
    font-size: 24px;
    padding: 30px 0;
  }
  .summary{
    color: $color-font-content;
    padding: 26px 15px;
    font-size: 28px;
    border-bottom: 1px solid $color-border;
  }
  .showMore {
    width: 200px;
    line-height: 60px;
    text-align: center;
    font-size: 30px;
    float: right;
    background: #fff;
    border-radius: 6px;
    color: $color-primary;
    margin-right: 15px;
    margin-bottom: 10px;
    border: 1px solid $color-primary;
  }
  .art-content{
    font-size: 30px;
  }
  .explain{
    margin: 30px 0 10px;
    font-size: 26px;
    padding-top: 30px;
    text-align: center;
    color: $color-font-content;
    border-top: 1px solid $color-border;
  }
}
</style>